<h2 class="flex-row-space-between">{{projectSvc.resolveNameById(projectId)|async}} / {{'CLIENT_DASHBOARD'|translate}}<button mat-fab
    color="primary" (click)="openBottomSheet()" *ngIf="extractResult(canDo('CREATE_CLIENT')) |async ">{{'ADD'|translate}}</button></h2>
<ng-container *ngIf="extractResult(canDo('VIEW_CLIENT')) |async ">
    <app-tenant-search (search)="doSearch($event)" [searchConfigs]="searchConfigs">    </app-tenant-search>
    <div style="display: flex;flex-direction: row;align-items: center;height: 56px; justify-content: space-between;">
    <section>
        <mat-slide-toggle #batchUpdate class="example-margin" [color]="'accent'" [checked]="'false'"
            style="margin-right: 16px;" (click)="showOptions()">
            {{'BATCH_OPERATION'|translate}}
        </mat-slide-toggle>
        <ng-container *ngIf="batchUpdate.checked">
            <button mat-raised-button color="primary" (click)="doBatchDelete()">{{'BATCH_DELETE'|translate}}</button>
        </ng-container>
    </section>
    <app-table-column-config [formId]="formId" [columns]="getColumnLabelValue()" ></app-table-column-config>
    </div>
    <div class="mat-elevation-z8">
    <div class="table-container">
        <table mat-table [dataSource]="dataSource" matSort (matSortChange)="updateTable($event)">
            <!-- Checkbox Column -->
            <ng-container matColumnDef="select">
                <th mat-header-cell *matHeaderCellDef>
                    <mat-checkbox (change)="$event ? masterToggle() : null"
                        [checked]="selection.hasValue() && isAllSelected()"
                        [indeterminate]="selection.hasValue() && !isAllSelected()" [aria-label]="checkboxLabel()">
                    </mat-checkbox>
                </th>
                <td mat-cell *matCellDef="let row">
                    <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null"
                        [checked]="selection.isSelected(row)" [aria-label]="checkboxLabel(row)">
                    </mat-checkbox>
                </td>
            </ng-container>
            <ng-container matColumnDef="id">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{columnList['id']|translate}} </th>
                <td mat-cell *matCellDef="let row">
                    <app-copy-field [inputValue]="row.id"></app-copy-field>
                </td>
            </ng-container>
    
            <ng-container matColumnDef="description">
                <th mat-header-cell *matHeaderCellDef> {{columnList['description']|translate}} </th>
                <td mat-cell *matCellDef="let row">
                    <app-editable-field [inputValue]="row.description"
                        (newValue)="doPatch(row.id,$event,'description')">
                    </app-editable-field>
                </td>
            </ng-container>
    
            <ng-container matColumnDef="name" sticky>
                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{columnList['name']|translate}} </th>
                <td mat-cell *matCellDef="let row">
                    <app-editable-field [inputValue]="row.name" (newValue)="doPatch(row.id,$event,'name')">
                    </app-editable-field>
                </td>
            </ng-container>
    
            <ng-container matColumnDef="resourceIndicator">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{columnList['resourceIndicator']|translate}} </th>
                <td mat-cell *matCellDef="let row">
                    <app-editable-boolean [inputValue]="row.resourceIndicator"
                        (newValue)="doPatchBoolean(row.id,$event,'resourceIndicator')"></app-editable-boolean>
                </td>
            </ng-container>
    
            <ng-container matColumnDef="grantTypeEnums">
                <th mat-header-cell *matHeaderCellDef> {{columnList['grantTypeEnums']|translate}} </th>
                <td mat-cell *matCellDef="let row">
                    <app-editable-select-multi [inputOptions]="getList(row.grantTypeEnums)" [list]="grantTypeList"
                        (newValue)="doPatchList(row.id,$event,'grantTypeEnums')"></app-editable-select-multi>
                </td>
            </ng-container>
    
            <ng-container matColumnDef="accessTokenValiditySeconds">
                <th mat-header-cell *matHeaderCellDef mat-sort-header style="padding-left: 8px;padding-right: 8px;">
                    {{columnList['accessTokenValiditySeconds']|translate}}
                </th>
                <td mat-cell *matCellDef="let row" style="padding-left: 8px;padding-right: 8px;">
                    <app-editable-field [inputValue]="row.accessTokenValiditySeconds"
                        (newValue)="doPatch(row.id,$event,'accessTokenValiditySeconds')">
                    </app-editable-field>
                </td>
            </ng-container>
    
            <ng-container matColumnDef="types">
                <th mat-header-cell *matHeaderCellDef> {{columnList['types']|translate}} </th>
                <td mat-cell *matCellDef="let row">
                    <ng-container *ngIf="row.types.length>1">
                        <mat-chip-list aria-label="chip list selection">
                            <mat-chip >
                                {{row.types[0]|translate}}
                            </mat-chip>
                            <mat-chip [matMenuTriggerFor]="more">
                                +{{(row.types.length-1)}} {{'MORE'|translate}}
                            </mat-chip>
                            <mat-menu #more="matMenu">
                                <ng-template matMenuContent>
                                    <div  style="display: flex;flex-direction: column;padding: 8px;">
                                        <mat-chip *ngFor="let e of removeFirst(row.types)" mat-menu-item style="margin-bottom:8px">
                                            {{e|translate}}
                                        </mat-chip>
                                    </div>
                                </ng-template>
                            </mat-menu>
                        </mat-chip-list>
                    </ng-container>
                    <ng-container *ngIf="row.types.length<=1">
                        <mat-chip-list aria-label="chip list selection">
                            <mat-chip *ngFor="let e of row.types">
                                {{e|translate}}
                            </mat-chip>
                        </mat-chip-list>
                    </ng-container>
                </td>
            </ng-container>
    
            <ng-container matColumnDef="resourceIds">
                <th mat-header-cell *matHeaderCellDef> {{columnList['resourceIds']|translate}} </th>
                <td mat-cell *matCellDef="let row">
                    <app-editable-page-select-multi [inputOptions]="getResourceList(row.resourceIds)"
                        [list]="resourceClientList" [entitySvc]="entitySvc"
                        (newValue)="doPatchList(row.id,$event,'resourceIds')"
                        [query]="'resourceIndicator:1'"
                        >
                    </app-editable-page-select-multi>
                </td>
            </ng-container>
    
            <ng-container matColumnDef="edit">
                <th mat-header-cell *matHeaderCellDef class="table-icon">{{columnList['edit']|translate}}</th>
                <td mat-cell *matCellDef="let row" class="table-icon">
                    <mat-icon (click)="openBottomSheet(row.id)" [color]="'primary'">edit</mat-icon>
                </td>
            </ng-container>
    
            <ng-container matColumnDef="delete">
                <th mat-header-cell *matHeaderCellDef class="table-icon">{{columnList['delete']|translate}}</th>
                <td mat-cell *matCellDef="let row" class="table-icon">
                    <mat-icon (click)="doDeleteById(row.id)" [color]="'warn'">delete_outline</mat-icon>
                </td>
            </ng-container>
            <tr mat-header-row *matHeaderRowDef="displayedColumns(); sticky: true"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns();"></tr>
        </table>
    </div>
    
    <mat-paginator [showFirstLastButtons]="true" [length]="totoalItemCount" [pageIndex]="entitySvc.pageNumber"
        [pageSize]="pageSize" (page)="pageHandler($event)">
    </mat-paginator>
    </div>
</ng-container>